<template>
  <div style="border:1px solid #ccc;margin:1em;padding:1em">
    从父组件中接收的prop, {{offer}}
    <ul>
        <li v-for="item in offer" :key="item.id"> {{item.name}}</li>
    </ul>

    <p>新公司:<input v-model="name"></p>
    <button @click="add">添加</button>
  </div>
</template>

<script>
import { ref } from 'vue'
export default {
    props: {
        offer: {
            type: Array,
            required: true,
            default: ()=>[]
        }
    },
    // 第1个参数为props。props为一个对象，内部包含了父组件传递过来的所有prop数据
    // 第2个参数为一个对象context。
    // context对象包含了attrs，slots， emit属性，
    // setup(props, context) {
    setup(props, {emit}) {
        console.log(emit)
        console.log(props.offer[1].name)
        const name = ref('')

        const add = () => {
            emit('addOffer', name.value)
        }

        return { name, add }

    }
}
</script>